<script setup lang="ts">
import {
  NForm,
  NFormItem,
  NInputNumber,
  NInput,
  NButton,
  NGrid,
  NGi,
  NTooltip,
  NScrollbar,
  NTab,
  NTabPane,
  NCheckbox,
  NSelect
} from 'naive-ui'
import { Food } from '@/services/setting.service'

const model = defineModel<Food[]>({ required: true })
const props = defineProps<{
  eat_type: number,
  addable?: boolean
}>()

function onAdd() {
  model.value.push({
    category: 0,
    key: props.eat_type === 0 ? '5' : '1',
    time_cast: 4000,
    repeat: 1,
    y_offset: 0
  })
}
function onRemove() {
  if (model.value.length < 4) {
    return
  }
  model.value.pop()
}
</script>
<template>
  <div class="foods-setting">
    <n-grid x-gap="12" y-gap="10" :cols="24" v-for="(item, i) of model" :key="i">
      <n-gi :span="[7, 7][eat_type]">
        <n-form-item label="类型" label-width="40">
          <n-select v-model:value="item.category"
            :options="[{ value: 0, label: '卡路里' }, { value: 1, label: '水分' }, { value: 2, label: '蛋白质' }]" />
        </n-form-item>
      </n-gi>
      <n-gi span="6" v-if="eat_type == 0">
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-form-item label="快捷键" label-width="54">
              <n-input v-model:value="item.key" :allow-input="v => !v || /^[0987]$/.test(v)" />
            </n-form-item>
          </template>
          只能选第二行快捷键 7 8 9 0
        </n-tooltip>
      </n-gi>
      <n-gi span="6" v-else>
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-form-item label="列位置" label-width="54">
              <n-input v-model:value="item.key" :allow-input="v => !v || /^[1-9][0-9]?$/.test(v)" />
            </n-form-item>
          </template>
          食物放置在箱子中的所在列 以左上角为准
        </n-tooltip>
      </n-gi>
      <n-gi :span="[6, 6][eat_type]">
        <n-form-item label="用时" label-width="40">
          <n-input-number :show-button="false" v-model:value="item.time_cast" :precision="0" :min="1000"
            :max="600000" />
        </n-form-item>
      </n-gi>
      <!-- <n-gi span="5" v-if="eat_type == 1">
        <n-form-item label="Y偏移" label-width="49">
          <n-input-number :show-button="false" v-model:value="item.y_offset" :precision="0" :min="0" :max="500" />
        </n-form-item>
      </n-gi> -->
      <n-gi :span="[5, 5][eat_type]">
        <n-form-item label="重复" label-width="40">
          <n-input-number :show-button="false" v-model:value="item.repeat" :precision="0" :min="1" :max="10" />
        </n-form-item>
      </n-gi>
    </n-grid>
    <div class="actions" v-if="addable">
      <n-button type="warning" size="small" :disabled="model.length<4" style="margin-right: 5px" @click="onRemove">- 移除</n-button>
      <n-button type="info" size="small" @click="onAdd">+ 新加</n-button>
    </div>
  </div>
</template>
<style lang="less" scoped>
.foods-setting {
  .n-grid {
    margin-bottom: 12px;
  }
}
.actions {
  display: flex;
  justify-content: flex-end;
}
</style>
